<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <template>
      <section class="chart-container">
        <el-row >
          <el-col :span="10" >
<!--            //扇形图-->
            <div id="chartPie" style=" width:100%; height:300px;"></div>
          </el-col>
<el-col :span="8">
  <el-card class="box-card" style="height: 310px; width: 650px ">
    <div slot="header" >
      <span>审核列表</span>
    </div>
    <template>
      <el-table
          :data="tableData"
          max-height="250"
          style="width: 100%">
        <el-table-column
            prop="reportType"
            label="申报类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="reportProject"
            label="申报全称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="reportState"
            label="审核状态">
        </el-table-column>
      </el-table>
    </template>
  </el-card>
</el-col>
        </el-row>
        <el-row>
          <el-col :span="12" >
<!--            //柱形图-->
            <div id="myChart"></div>
          </el-col>
          <el-col :span="12">

            <el-card class="box-card"  style="margin-top: 10px; width: 530px; height: 320px" >
              <div slot="header">
                <span>公告栏</span>
              </div>
              <marquee direction="down" behavior="alternate" height="200" scrollamount="1" scrolldelay="0"
                       loop="-1">
              <template v-for="notice in notices">
                <a href="javascript:void(0);" @click="openN(notice)" style="display: block;margin-bottom: 10px;margin-left: 20px ">{{notice.title}}</a>
              </template>
              </marquee>
            </el-card>
          </el-col>
        </el-row>
      </section>
    </template>
  </div>
</template>
    <script>
      import * as echarts from 'echarts'

      export default {
        data() {
          return {

            tableData: [],
              projectCount:1,
              projectPass:50,
              baseCount:1,
              basePass:50,
              unitCount:1,
              unitPass:50,
            arr:[],
            chartPie: null,
            echartsOption:null,
            notices:[],
          }
        },
        methods: {
          openN(notice) {
            this.$alert(notice.content, notice.title, {
              confirmButtonText: '确定',
            });
          },
          pass(){
            let url='http://localhost:8080/projects/selectPass';
            this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .get(url).then((response)=>{
                  let responsebody = response.data;

                  this.projectPass=responsebody.data[0]
              //console.log(this.projectPass)
                 this.basePass=responsebody.data[1]
             // console.log(this.basePass)
                  this.unitPass=responsebody.data[2]
            //  console.log(this.unitPass)
            })
          },
          drawPieChart() {
            console.log(this.projectPass)
            console.log(this.basePass)
            console.log(this.unitPass)
            this.chartPie = echarts.init(document.getElementById('chartPie'));
            this.chartPie.setOption({
              title: {
                text: '体育局',
                subtext: '体育产业申报统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: ['项目申报', '基地申报', '单位申报']
              },
              series: [
                {
                  name: '申报业务',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                    { value: this.projectCount, name: '项目申报' },
                    { value: this.baseCount, name: '基地申报' },
                    { value: this.unitCount, name: '单位申报' },
                  ],
                  itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                    }

                }
              ]
            });

            this.echartsOption = echarts.init(document.getElementById('myChart'), 'light')	// 初始化echarts, theme为light
            this.echartsOption.setOption(
                {	// echarts选项，所有绘图数据和样式都在这里设置
                  xAxis: {
                    type: 'category',
                    data: ['项目申报', '单位申报', '基地申报'],   // x轴数据
                    name: '类型',   // x轴名称
                    nameTextStyle: {	// x轴名称样式
                      fontWeight: 200,
                      fontSize: 18
                    }
                  },
                  yAxis: {
                    type: 'value',
                    name: '通过率单位(%)',   // y轴名称
                    nameTextStyle: {	// y轴名称样式
                      fontWeight: 300,
                      fontSize: 18
                    }
                  },
                  tooltip: {   //鼠标放到图上的数据展示样式
                    trigger: 'axis'
                  },
                  series: [{  //series中加入每个bar的数据
                    name: '类型',
                    type: 'bar',
                    barWidth: '30%',
                    data: [{value:this.projectPass},{value:this.unitPass},{value:this.basePass}]
                  }]}
            )	// echarts设置选项

          },
          drawCharts() {
            this.drawPieChart()

          },
          getTypeValue(){
            let url='http://localhost:8080/projects/selectCountByType';
            this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .get(url).then((response)=>{
              let responseBody = response.data;

              this.projectCount=responseBody.data.projectCount;
              this.baseCount = responseBody.data.baseCount;
              this.unitCount = responseBody.data.unitCount;
              this.drawCharts()
            })
          },
          loadTableData(){
            let url='http://localhost:8080/projects/selectByAudit';
            this.axios .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .get(url).then((response)=>{
              this.tableData=response.data.data
            })
          }
        },

        mounted: function () {
          this.getTypeValue()
          this.loadTableData()
        },
        created() {
          this.pass()
          if (location.href.indexOf("#reloaded") == -1) {
            location.href = location.href + "#reloaded";
            location.reload();
          }

          /* 公告栏 */
          let  url='http://localhost:8080/notices'
          this.axios
              .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
              .get(url).then((response)=>{
            this.notices=response.data.data;
            console.log(this.notices)
          })
        }

      }
    </script>

<style scoped>
 .chart-container {
        width: 100%;
      }
 #myChart{
  width:100%;
  height: 400px;
  float: left;

 }
</style>